<script lang="ts" setup>
import type { Dict } from '@croco/framework/types';

import { ref } from 'vue';

import { service } from '#/api/request';
import { DataTable } from '#/components/data-table';

import { useTable } from './data';
import Detail from './detail.vue';

defineOptions({ name: 'SystemOperationLog' });

const props = defineProps<{
    enums: Record<string, Array<any | Dict> | undefined>;
    shortcuts: Array<Record<string, any>>;
}>();

const dataTableRef = ref<InstanceType<typeof DataTable>>();
const editRef = ref<InstanceType<typeof Detail>>();
const columns = useTable(props.enums, ({ code, scope }) => {
    switch (code) {
        case 'edit': {
            onEdit(scope.row);
            break;
        }
        case 'remove': {
            onDelete([scope.row]);
            break;
        }
        default: {
            break;
        }
    }
});

// 表单
function onEdit(row?: any) {
    editRef.value?.open({
        data: row,
    });
}

// 清空
function onClear() {
    service.confirm({
        message: `确定清空所有记录（非admin用户）?`,
        url: '/system/log/operation/clear',
        success: dataTableRef.value?.refresh,
    });
}

// 删除
function onDelete(rows: { id: number }[]) {
    const logs = rows.map((item) => item.id);
    service.confirm({
        message: `确定对所选${logs.length}条记录进行${logs.length === 1 ? '删除' : '批量删除'}操作?`,
        url: '/system/log/operation',
        data: { logs },
        success: dataTableRef.value?.refresh,
    });
}
</script>
<template>
    <DataTable ref="dataTableRef" :columns="columns" :form-item-width="320" class="operation-table" api="/system/log/operation" selection select-on-row-click>
        <template #extra="{ selections }">
            <el-button v-auth="'system:operation:log:remove'" @click="onDelete(selections)" :disabled="selections.length <= 0" type="danger" />
            <el-button v-auth="'system:operation:log:clear'" @click="onClear()" type="warning" />
        </template>
        <template #title="{ form }">
            <el-select v-model="form.title" :empty-values="[null, undefined]" @change="() => (form.type = '')">
                <el-option label="全部" value="" />
                <el-option v-for="(item, index) in enums.title" :key="index" :label="item.title" :value="item.title" />
            </el-select>
        </template>
        <template #type="{ form }">
            <el-select v-model="form.type" :empty-values="[null, undefined]">
                <el-option label="全部" value="" />
                <template v-for="(operation, index) in enums.title?.find((item: any) => item.title === form.title)?.operations" :key="index">
                    <template v-for="(option, num) in enums.type" :key="num">
                        <el-option v-if="operation === option.value" :label="option.label" :value="option.value" />
                    </template>
                </template>
            </el-select>
        </template>
        <template #status="{ form }">
            <el-select v-model="form.status" :empty-values="[null, undefined]">
                <el-option label="全部" value="" />
                <el-option v-for="(item, index) in enums.status" :key="index" :label="item.label" :value="item.value" />
            </el-select>
        </template>
        <template #timeFrame="{ form }">
            <el-date-picker v-model="form.timeFrame" type="datetimerange" :shortcuts="shortcuts" value-format="YYYY-MM-DD HH:mm:ss" />
        </template>
    </DataTable>

    <Detail ref="editRef" :enums="enums" />
</template>
